<template>
	<view style="padding-bottom: 144rpx">
		<!-- 搜索框部分 -->
		<view class="w710 auto pt26">
			<u-search
				height="80"
				bgColor="#F5F6FA"
				:show-action="false"
				color="#A6A7A9"
				placeholder="请输入您需要的资讯内容"
				:inputStyle="{ fontSize: '28rpx' }"
				v-model="search"
				@input="input"
			></u-search>
		</view>
		<!-- tab内容 -->
		<view class="tabs mt28">
			<u-tabs
				:list="list"
				:is-scroll="false"
				v-model="current"
				@change="change"
				activeColor="#260E03"
				inactiveColor="#260E03"
				:barStyle="{ background: 'linear-gradient(180deg, #FF8964 0%, #FD4B2C 100%)' }"
			></u-tabs>
		</view>
		<!-- tab结束 -->
		<!-- 数据展示 -->
		<view class="mt64" v-for="(item, index) in arr" :key="index">
			<InfoData :data="item"></InfoData>
		</view>
		<!-- 数据展示 -->
		<TabBar :select="2"></TabBar>
	</view>
</template>

<script setup>
import { getNewsCategory, getNewsList } from '@/utils/api.js';
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref,onMounted } from 'vue';
onLoad(() => {
	change();
	getTabsList();
});
onMounted(()=>{
	let pageHead = document.getElementsByTagName('uni-page-head');
	pageHead[0].style.display = 'none';
})
let search = ref('');
let current = ref(0); //当前激活的下标
let arr = ref([]); //循环的数组
//tabs数组
let list = ref([]);
//limit
let limit = ref(0);
//获取资讯栏目
const getTabsList = () => {
	getNewsCategory().then(res => {
		res.data.unshift({ id: 0, name: '全部', weigh: 0 });
		list.value = res.data;
	});
};
//获取资讯列表
let getNews = () => {
	let data = {
		search: search.value,
		category_id: current.value,
		limit: limit.value,
		page: 10
	};
	getNewsList(data).then(res => {
		arr.value = res.data;
	});
};
let input = () => {
	getNews();
};
let change = (index = 0) => {
	current.value = index;
	console.log(current.value);
	if (current.value === 0) {
		console.log(arr.value);
	}
	if (current.value === 1) {
		arr.value = arr.value.filter(el => el.category_id === 1);
	}
	if (current.value === 2) {
		arr.value = arr.value.filter(el => el.category_id === 2);
	}
	if (current.value === 3) {
		arr.value = arr.value.filter(el => el.category_id === 3);
	}
	if (current.value === 4) {
		arr.value = arr.value.filter(el => el.category_id === 4);
	}
	getNews();
};
</script>

<style lang="scss" scoped>
page {
	background: #fff;
}
:deep(.u-icon__icon) {
	font-size: 40rpx !important;
	padding-left: 20rpx;
}
</style>
